<template>
  <div class="app-container">
    <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
      <template v-slot:handle="slotProps" label-width="500px">
        <el-button type="success" size="small" round @click.native.prevent="outboundHandle(slotProps.row)">出库
        </el-button>
        <el-button type="primary" size="small" round @click.native.prevent="outboundRecord(slotProps.row)">出库记录
        </el-button>
      </template>
    </wise-crud>

    <el-dialog title="出库" :visible.sync="outboundDialog" :close-on-click-modal="false" close-on-press-escape
      width="30%">
      <el-form ref="ruleForm" :model="obj" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <span>{{ obj.name }}</span>
        </el-form-item>
        <el-form-item label="项目" prop="spaceId">
          <el-select v-model="obj.spaceId" placeholder="请选择">
            <el-option v-for="(item,index) in projectData" :key="index" :label="item.name" :value="item.spaceId" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库数量" prop="inventoryQuantity">
          <el-input-number v-model="obj.inventoryQuantity" :min="1" :max="inventoryQuantityTotal" :controls="false" />
        </el-form-item>
        <el-form-item label="序号" prop="coding">
          <span>{{ obj.coding }}</span>
        </el-form-item>
        <el-form-item label="型号及规格" prop="model">
          <span>{{ obj.model }}</span>
        </el-form-item>
        <el-form-item label="品牌" prop="coding">
          <span>{{ obj.brand }}</span>
        </el-form-item>
        <el-form-item label="分类" prop="model">
          <span>{{ obj.dictionaryInfo?obj.dictionaryInfo.name:'' }}</span>
        </el-form-item>
        <el-form-item label="出库人员" prop="warehouseOutUserId">
          <el-select v-model="obj.warehouseOutUserId" placeholder="请选择">
            <el-option v-for="(item,index) in employeesData" :key="index" :label="item.userInfo.username"
              :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库时间" prop="warehouseOutTime">
          <wise-date v-model="obj.warehouseOutTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outboundDialog = false">取 消</el-button>
        <el-button type="primary" @click="outboundSubmit" :disabled="isDisabled">确 定</el-button>
      </span>
    </el-dialog>

    <OutboundRecord ref="outboundRecord" />
  </div>
</template>

<script>
  import WiseCrud from '../../../../components/Crud/wiseCrud'
  import WiseDate from '@/components/Crud/components/wiseDate'
  import OutboundRecord from './OutboundRecord.vue'
  import {
    postHandle
  } from '../../../../api'
  import {
    dateFormat
  } from '../../../../filters'

  export default {
    name: 'UserManage',
    components: {
      WiseCrud,
      WiseDate,
      OutboundRecord
    },
    data() {
      return {
        handle: ['add'],
        urls: {
          list: '/api/v1/welder-sbtx-second/warehouse-comb/list',
          show: '/api/v1/welder-sbtx-second/warehouse-comb/show/',
          add: '/api/v1/welder-sbtx-second/warehouse-comb/create',
          delete: '/api/v1/welder-sbtx-second/warehouse-comb/remove/',
          update: '/api/v1/welder-sbtx-second/warehouse/update/'
        },
        fields: [{
            label: '物料名称',
            prop: 'name',
            type: 'text',
            use: ['table', 'view', 'edit', 'add'],
            rules: [{
              required: true,
              message: '必填项不能为空',
              trigger: 'blur'
            }]
          },
          {
            label: '数量',
            prop: 'inventoryQuantity',
            type: 'number',
            min: 0,
            use: ['table', 'view', 'edit', 'add'],
            rules: [{
              required: true,
              message: '必填项不能为空',
              trigger: 'blur'
            }]
          },
          {
            label: '序号',
            prop: 'coding',
            type: 'text',
            use: ['table', 'view', 'edit', 'add'],
            rules: [{
              required: true,
              message: '必填项不能为空',
              trigger: 'blur'
            }]
          },
          {
            label: '型号及规格',
            prop: 'model',
            type: 'text',
            use: ['table', 'view', 'edit', 'add'],
            rules: [{
              required: true,
              message: '必填项不能为空',
              trigger: 'blur'
            }]
          },
          {
            label: '品牌',
            prop: 'brand',
            type: 'text',
            use: ['table', 'view', 'edit', 'add'],
            rules: [{
              required: true,
              message: '必填项不能为空',
              trigger: 'blur'
            }]
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            use: ['table', 'view', 'edit', 'add'],
            rules: [{
              required: false,
              message: '必填项不能为空',
              trigger: 'blur'
            }]
          },
          {
            label: '分类',
            prop: 'dictionaryInfo',
            type: 'render',
            viewRender: (h, item, object) => {
              return h('div', object.dictionaryInfo ? object.dictionaryInfo.name : '')
            },
            tableRender: (h, row, index) => {
              return h('div', row.dictionaryInfo ? row.dictionaryInfo.name : '')
            },
            use: ['table', 'view']

          },
          {
            label: '分类',
            prop: 'classificationInfo',
            type: 'select',
            url: '/api/v1/welder-sbtx-second/dictionary',
            labelKey: 'name',
            valueKey: 'code',
            objKeys: [{
              field: 'classification',
              key: 'code'
            }],
            filters: [{
                field: 'st',
                operator: 'NE',
                value: 9
              },
              {
                field: 'pdCode',
                operator: 'EQUALS',
                value: 'materialType'
              }
            ],
            rules: [{
              required: true,
              message: '必填项不能为空',
              trigger: 'change'
            }],
            use: ['edit', 'add']
          },
          // {
          //   label: '入库人员',
          //   prop: 'warehousingUserInfo',
          //   type: 'select',
          //   url: '/api/v1/welder-uac-second/space-user-member-comb/get-list',
          //   labelKey: 'userInfo.username',
          //   valueKey: 'userId',
          //   objKeys: [
          //     {
          //       field: 'warehousingUserId',
          //       key: 'userId'
          //     }
          //   ],
          //   filters: [],
          //   use: ['edit', 'add'],
          //   rules: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
          // },
          // {
          //   label: '入库人员',
          //   type: 'render',
          //   use: ['table', 'view'],
          //   tableRender: (h, row, index) => {
          //     return h('div', row.warehousingUserInfo ? row.warehousingUserInfo.username : '')
          //   },
          //   viewRender: (h, item, object) => {
          //     return h('div', object.warehousingUserInfo ? object.warehousingUserInfo.username : '')
          //   }
          // },
          // {
          //   label: '入库时间',
          //   prop: 'warehousingTime',
          //   type: 'datetime',
          //   format: 'yyyy-MM-dd HH:mm:ss',
          //   use: ['edit', 'add'],
          //   rules: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
          // },
          // {
          //   label: '入库时间',
          //   type: 'render',
          //   use: ['table', 'view'],
          //   tableRender: (h, row, index) => {
          //     return h('div', dateFormat(row.warehousingTime, 'YYYY-MM-DD HH:mm:ss'))
          //   },
          //   viewRender: (h, item, object) => {
          //     return h('div', dateFormat(object.warehousingTime, 'YYYY-MM-DD HH:mm:ss'))
          //   }
          // },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: ['view', 'edit', 'delete'],
            tableWidth: 320
          }
        ],
        roleList: [],
        rejectedDialog: false,
        obj: {
          name: null,
          coding: null,
          model: null,
          inventoryQuantity: null,
          warehouseOutUserId: null,
          warehouseOutTime: null,
          spaceId: null,
          brand: null,
          classification: null
        },
        rules: {
          inventoryQuantity: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          warehouseOutUserId: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          warehouseOutTime: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          },
          spaceId: {
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }
        },
        outboundDialog: false,
        employeesData: [],
        projectData: [],
        inventoryQuantityTotal: 0,
        copeObja: {},
        isDisabled: false,
      }
    },
    computed: {
      filters() {
        return [{
            field: 'entSpaceId',
            operator: 'EQUALS',
            value: this.entSpaceId
          },
          {
            field: 'spaceId',
            operator: 'ISNULL',
            value: null
          }
        ]
      },
      entSpaceId() {
        return this.$store.getters.entSpaceId
      }
    },
    created() {
      this.getEmployees()
      this.getProject()
    },
    methods: {
      getEmployees() {
        let params = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          },
        }
        postHandle('/api/v1/welder-uac-second/space-user-member-comb/get-list', params).then(res => {
          this.employeesData = res.result
        })
      },
      getProject() {
        let params = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle('/api/v1/welder-sbtx-second/project-info-comb/list', params).then(res => {
          this.projectData = res.result
        })
      },
      outboundHandle(row) {
        this.obj = JSON.parse(JSON.stringify(row))
        this.copeObja = row
        this.inventoryQuantityTotal = this.obj.inventoryQuantity
        this.obj.inventoryQuantity = null
        this.outboundDialog = true
        this.isDisabled = false
      },
      outboundSubmit() {
        if (this.obj.inventoryQuantity > this.copeObja.inventoryQuantity) {
          this.$message.error('出库数量大于仓库数量')
          return false
        }
        this.isDisabled = true
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            postHandle(`/api/v1/welder-sbtx-second/warehouse-comb/warehouse-out/${this.obj.id}`, {
              obj: this.obj
            }).then(res => {
              this.$message.success('成功')
              this.$refs['wise-crud'].handleSearch(0)
              this.outboundDialog = false

            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      outboundRecord({
        id
      }) {
        
        this.$refs['outboundRecord'].entWarehouseId = id
        this.$refs['outboundRecord'].refreshTable()
        this.$refs['outboundRecord'].flag = true
        this.$refs['outboundRecord'].dialog = true
      }
    }
  }
</script>

<style></style>